<template>
    <div class="mod-sys__user">
        <el-form :inline="true" :model="state.dataForm" @keyup.enter="getList()">
            <el-form-item label="课程名称">
                <el-input v-model="state.dataForm.name" placeholder="课程名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="授课老师">
                <el-input v-model="state.dataForm.teacherName" placeholder="授课老师" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getList()">查询</el-button>
            </el-form-item>
        </el-form>
        <TableWrapper :valueData="pageList" :columns="columns" :optrations="optrations" @pageSize="pageSize"
            @currentPage="currentPage" :pageCurrent="{...pageCurrent,total}">
            <template #teacherId="{ row }">
                {{ getTeacherName(row.teacherId) }}
            </template>
        </TableWrapper>
        <add-or-update ref="addOrUpdateRef" :teacherList="teacherList" @refreshDataList="getList"></add-or-update>
    </div>
</template>

<script lang="ts" setup>
    import useView from "@/hooks/useView";
    import { reactive, ref, toRefs, onMounted } from "vue";
    import TableWrapper from "@/components/table/TableWrapper.vue";
    import AddOrUpdate from "./user-add-or-update.vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import baseService from "@/service/baseService";
    const teacherList = ref([])
    const pageList = ref([])
    const view = reactive({
        getDataListIsPage: true,
    });
    const total = ref('0')
    const pageCurrent = reactive({
        pageNum: '1',
        pageSize: 20
    })
    const columns = ref([
        {
            value: 'name',
            label: '课程名称'
        },
        {
            value: 'maxSize',
            label: '最大选课人数'
        },
        {
            value: 'currentSize',
            label: '课程已选人数'
        },
        {
            value: 'description',
            label: '课程介绍'
        },
    ])
    const optrations = [
        {
            name: '查看学生选课情况',
            type: 'primary',
            icon: 'el-icon-plus',
            method: (columns, row) => {
                addOrUpdateHandle(row)
            },
            disabled: false
        },
    ]

    onMounted(() => {
        getTeacherList()
        getList()
    });

    const getTeacherList = () => {
        let param = {
            roleName: '教师'
        };
        baseService
            .post("/cam/user/getList", param)
            .then((res) => {
                if (res.code === 0) {
                    teacherList.value = res.data
                } else {
                    ElMessage.error(res.msg);
                }
            })
            .catch(() => {
            });
    }
    const getList = (name, id) => {
        let param = {
            ...pageCurrent,
            query: {
                teacherName: state.dataForm.teacherName,
                name: state.dataForm.name
            }
        };
        baseService
            .post("/cam/course/pageList", param)
            .then((res) => {
                if (res.code === 0) {
                    pageList.value = res.data.records
                    total.value = res.data.total
                } else {
                    ElMessage.error(res.msg);
                }
            })
            .catch(() => {
            });

    }

    const pageSize = (val) => {
        pageCurrent.pageSize = val
        getList()
    }
    const currentPage = (val) => {
        pageCurrent.pageNum = val
        getList()
    }
    const getTeacherName = (id) => {
        if (teacherList.value.length > 0) {
            return teacherList.value.find(item => {
                return item.id === id
            }).realName
        }
    }
    const state = reactive({ ...useView(view), ...toRefs(view) });

    const addOrUpdateRef = ref();
    const addOrUpdateHandle = (row?: object) => {
        addOrUpdateRef.value.init(row);
    };
</script>